<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入搜索信息'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <el-table :data="tableData" height="500px" border  stripe highlight-current-row style="width: 100% ; ">
        <el-table-column prop="type" label="编号" align="center" width="50"></el-table-column>
        <el-table-column prop="order_no" label="订单编号" align="center" width="140"></el-table-column>
        <el-table-column prop="order_time" label="提交时间" align="center" width="180"></el-table-column>
        <el-table-column prop="product_no" label="商品编号" align="center" width="180"></el-table-column>
        <el-table-column prop="pay_price" label="订单金额" align="center" width="140"></el-table-column>
        <el-table-column prop="pay_type" label="支付方式" align="center" width="140"></el-table-column>
        <el-table-column prop="order_state" label="订单状态" align="center" width="140"></el-table-column>
        <el-table-column label="操作" align="center" min-width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" v-if="tableData[scope.$index].orderState === '待发货'"
              @click="sendGoods(scope.$index)">确认发货</el-button>
            <el-button size="mini" v-else @click="orderInfo(scope.$index)">订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
         <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { showOrders ,showPageOrders} from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardDate from '@/components/commodity/CardDate.vue'
export default {
  name: 'KodaiOrderList',

  data () {
    return {
      tableData: [],
      total: 20,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
    };
  },

  mounted () {
    showOrders().then(res => {
      this.total = res.data.data.length
      this.getList();
    })
  },

  methods: {
    // 分页组件函数
    async getList () {
      // 显示加载动画
      let loading = this.$loading({ lock: true, text: "加载中", background: "rgba(0, 0, 0, 0.7)" });
      try {
        var res = await showPageOrders(this.queryParams)
        if (res.data.code == 200) {
          this.tableData = res.data.data
          console.log(this.tableData);
        }
      }catch (err) {
        console.log(err);
        // 显示注册失败的消息，并提示错误原因
        this.showMessage.call(this, 'error', '查询失败');
      }
      finally {
        // 关闭加载动画
        loading.close();
      }
    },
  }, components: {
    CardDate, CardHeader, CardinputVue
  }
};
</script>

<style lang="scss" scoped>
 ::v-deep .cell{
  font-size: 15px;
}</style>